<!DOCTYPE html>
<html xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../static/bm/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../static/bm/css/thesame.css" media="all">
    <link rel="stylesheet" href="../static/bm/css/headCss.css" media="all">
    <link rel="stylesheet" href="../static/bm/css/leftSidebar.css" media="all">
    <link rel="stylesheet" href="../static/bm/bmuserinfo/css/rightCon.css" media="all">
    <link rel="stylesheet" href="../static/bm/bmuserinfo/css/page.css" media="all">
    <link rel="stylesheet" href="../static/bm/bmuserinfo/css/popCss.css" media="all">
    <link rel="stylesheet" href="../static/userinfoPrivate/userinfo/css/tree.css" media="all">
    <link rel="stylesheet" href="../static/userinfoPrivate/layer/theme/default/layer.css" media="all">
    <style>
        .layui-btn-group > p > span {
            float: left;
            border-radius: 4px !important;
        }

        .layui-btn-group .layui-btn {
            margin-right: 20px !important
        }
    </style>
</head>

<body class="layui-layout-body">
<div class="layui-body pad12px">
    <!-- 内容主体区域 -->
    <div class="layui-box-con relative">
        <div class="layui-left-con layui-left-label-con pad12px">
            <div class="border-radius4 bgWhite box-shadows">
                <div class="tree-con-box" id="organizationDiv">

                </div>
            </div>
        </div>
        <div class="layui-right-con layui-right-label-con">
            <div class="border-radius4 bgWhite box-shadows">
                <div class="scroll-box-con">
                    <div class="border-bot1px pb20px mb20px">
                        <div class="add-mess">
                            <div class="add-mess-child left mr20px">
                                <div>
                                    <label>关键字：</label>
                                </div>
                                <div class="add-mess-form">
                                    <p class="add-mess-form-tree"><input type="text" id="param" placeholder="请输入老人姓名或年龄"></p>
                                </div>
                            </div>
                            <div class="add-mess-child left mr20px">
                                <div>
                                    <label>身份证号：</label>
                                </div>
                                <div class="add-mess-form">
                                    <p class="add-mess-form-tree"><input type="text" id="userPid" placeholder="请输入身份证号"></p>
                                </div>
                            </div>
                            <div class="left">
                                <span class="white border-radius4 bgGreen block pl20px pr20px ml30px lh34px cursor" id="serchBtn">查&nbsp;询</span>
                            </div>
                        </div>
                    </div>
                    <div class="mb20px lh32px overflow add-btn-input">
                        <div class="layui-btn-group demoTable">
                            <p class="left cursor">
                                <shiro:hasPermission name="fenrenguanli_add">
                                    <span class="white border-radius4 bgGreen inline-block pl15px pr15px layui-btn" data-type="getCheckData"><img src="../static/bm/bmuserinfo/img/button_add.png">添加老人</span>
                                </shiro:hasPermission>
                                <shiro:hasPermission name="fenrenguanli_coupon">
                                    <span class="white border-radius4 bgGreen inline-block pl15px pr15px ml25px mr25px layui-btn" data-type="getCheckLength"><img src="../static/bm/bmuserinfo/img/icon_quan.png">批量发券</span>
                                </shiro:hasPermission>
                                <shiro:hasPermission name="fenrenguanli_remove">
                                    <span class="white border-radius4 bgRed inline-block pl15px pr15px layui-btn" data-type="isAll"><img src="../static/bm/bmuserinfo/img/icon_delete.png">批量移除</span>
                                </shiro:hasPermission>
                            </p>
                        </div>
                        <p class="right">优惠老人总数：<span class="green"><em id="count"></em>人</span></p>
                    </div>
                    <div class="border1px border-radius4 relative mb40px">
                        <table class="layui-hide" id="test" lay-filter="test"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--弹层-->
<div id="pop-con" style="display:none;">
    <div class="pop-up">
        <div>
            <div class="pop-title relative overflow mb15px">
                <span class="ml15px">发放优惠券</span>
                <p class="right"><img src="../static/bm/bmuserinfo/img/close_icon.png" class="block pop-close"></p>
            </div>
            <div class="pop-form mt30px mb30px">
                <div class="layui-form-item lh32px">
                    <label class="left">发放数量：</label>
                    <span class="left" style="width: 300px;">
								<input type="number" id="coupons" oninput="if(value.length>5)value=value.slice(0,5)" placeholder="请输入数量" class="layui-input">
							</span>
                    <label class="right">张/人/年</label>
                </div>
            </div>
            <div class="btn-con textCenter">
                <span class="btn-one pop-close">取&nbsp;消</span>
                <span class="btn-two" id="fix" onclick="faquan()">确&nbsp;定</span>
            </div>
        </div>
    </div>
</div>

<!--<script type="text/html" id="barDemo">-->
<!--    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>-->
<!--    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>-->
<!--</script>-->

<script src="../static/bm/js/jquery-2.1.3.min.js"></script>
<script src="../static/bm/layui/layui.js" charset="utf-8"></script>
<!--<script src="../static/bm/bmuserinfo/js/treeTwo.js"></script>-->
<script src="../static/userinfoPrivate/userinfo/js/treeThree.js"></script>
<!--<script src="../static/userinfoPrivate/layer/layer.js" charset="utf-8"></script>-->
<script>

    var ids = "";

    $(function () {
        getData();

        $("#serchBtn").click(function () {
            getData();
        })

        //获取组织架构
        getOrganization();
    });

    function getData(orgId) {
        layui.use(['element', 'table', 'layer'], function () {
            var element = layui.element;
            var table = layui.table;
            var layer = layui.layer;
            var param = $("#param").val();
            var userPid = $("#userPid").val();

            //第一个实例
            table.render({
                elem: '#test'//,url: '/demo/table/user/'
                , url: "../bmuserinfo/getBmUserinfoList"
                , where: {param: param, type: 2, orgId: orgId, userPid: userPid}
                // , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                // , toolbar: true
                // , defaultToolbar: []
                , request: {
                    pageName: 'currentPage' //页码的参数名称，默认：page
                    , limitName: 'pageSize' //每页数据量的参数名，默认：limit
                }
                //,count: 10  //数据总数，从服务端得到
                //,data: listData
                , page: true //开启分页
                , limit: 10 //每页显示的条数
                //,limits:[3,4,5]
                , groups: 9 //连续页码个数
                , parseData: function (res) {
                    console.log(res);
                    return {
                        "code": res.code,
                        "data": res.data.list,
                        "count": res.data.total,
                        "limit": res.data.pageSize,
                    };
                },
                cols: [
                    [ //表头
                        {
                            type: 'checkbox',
                            fixed: 'left'
                        }, {
                        field: 'userName',
                        title: '姓名',
                    }, {
                        field: 'userSex',
                        title: '性别',
                    }, {
                        field: 'age',
                        title: '年龄',
                    }, {
                        field: 'belongOrganization',
                        title: '管辖机构',
                    }, {
                        field: 'totalCoupons',
                        title: '发放券数/年',
                    }, {
                        field: 'usedCoupons',
                        title: '已用券数/年',
                    }, {
                        field: 'unusedCoupons',
                        title: '剩余券数/年',
                    }, {
                        field: 'operation',
                        title: '操作',
                        style: 'color:#1C9399',
                        fixed: 'right',
                        templet: function (res) {
                            // console.log(res);
                            return "<div class='table-list-btn'><span class='cursor' onclick=\"getBmUserinfoDetails('" + res.userNo + "')\">查看</span></div>"
                        }
                    }
                    ]
                ], done: function (res, curr, count) {
                    $("#count").text(count);
                }
            });
            //监听表格复选框选择
            table.on('checkbox(test)', function (obj) {
                console.log(obj)
            });

            layui.$, active = {
                getCheckData: function () { //跳转添加老人页
                    window.location.href = "../bmuserinfo/toAddBmUserinfo?type=2";
                }
                , getCheckLength: function () { //批量发券
                    var checkboxValue = ""
                    var checkStatus = table.checkStatus('test')
                        , data = checkStatus.data;
                    if (data.length > 0) {
                        for (var i = 0; i < data.length; i++) {
                            checkboxValue += data[i].userNo + ",";
                        }
                        //弹层
                        layerOpen();
                        ids = "";
                        ids = checkboxValue.slice(0, checkboxValue.length - 1);
                    } else {
                        layer.msg("请选择老人");
                    }
                }
                , isAll: function () { //批量移除
                    var checkboxValue = ""
                    var checkStatus = table.checkStatus('test')
                        , data = checkStatus.data;
                    if (data.length > 0) {
                        for (var i = 0; i < data.length; i++) {
                            checkboxValue += data[i].userNo + ",";
                        }
                        del(checkboxValue.slice(0, checkboxValue.length - 1));
                    } else {
                        layer.msg("请选择老人");
                    }
                }
            };

            $('.demoTable .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });
    }


    //批量移除老人
    function del(ids) {
        var data = {ids: ids, type: 2};
        layer.confirm('是否确认移除选中老人', {
            btn: ['确定', '取消']
        }, function () {
            layer.closeAll();
            $.ajax({
                url: "../bmuserinfo/batchRemove",
                type: "post",
                async: false,
                dataType: "json",
                data: data,
                success: function (result) {
                    if (result.code == 200) {
                        layer.msg(result.msg);
                        getData();
                    } else {
                        layer.msg(result.msg);
                    }
                }
            })
        });
    }


    //弹层
    function layerOpen() {
        layer.open({
            type: 1,
            title: false, //不显示标题栏
            closeBtn: false,
            area: ['500px', ''],
            shade: 0.6,
            id: 'payCons', //设定一个id，防止重复弹出
            /*,btn: ['确认支付']*/
            btnAlign: 'c',
            moveType: 1, //拖拽模式，0或者1
            shadeClose: true, //设置允许点遮罩关闭
            content: $("div#pop-con"),
            success: function () {
                //关闭弹层
                $(".pop-close").click(function () {
                    layer.closeAll();
                });
            },

        });
    }

    //侧边栏折叠收起
    $('.area-nav-con:gt(0) ul').hide();
    $('.area-nav-con div').click(function () {
        $(this).next().slideToggle(300);
        if ($(this).find('span img').attr('src') == 'img/icon_select_up.png') {
            $(this).find('span img').attr('src', 'img/icon_select_down.png');
            //$(this).parent().siblings().find('img').attr('src', 'img/icon_up.png')
        } else {
            $(this).find('span img').attr('src', 'img/icon_select_up.png')
        }
    })
    /* 			$('.tree-one div.tree-children div p.tree-arrow').click(function() {
                    $(this).parent().parents('div.tree-children').nextAll('ul').slideToggle(300);
                    if ($(this).find('img').attr('src') == 'img/icon_up.png') {
                        $(this).find('img').attr('src', 'img/icon_down.png');
                        //$(this).parent().siblings().find('img').attr('src', 'img/icon_up.png')
                    } else {
                        $(this).find('img').attr('src', 'img/icon_up.png')
                    }
                }) */
    //侧边栏旋选中样式
    $('.label-nav-con .f16px').click(function () {
        $(this).addClass('current').parent().siblings().children().removeClass('current');
        $(this).parent().parent().find('li').removeClass('current');
    });

    $('.label-nav-con li').click(function () {
        $(this).addClass('current').parent().parent().siblings().find('li').removeClass('current');
        $(this).siblings().removeClass('current');
        $(this).parent().siblings().removeClass('current');
        $(this).parent().parent().siblings().find('.f16px').removeClass('current');
    });


    //发券
    function faquan() {
        var coupons = $("#coupons").val();
        if (isNull(coupons)) {
            layer.msg("请输入数量");
            return;
        }
        var data = {ids: ids, type: 2, coupons: coupons}
        $.ajax({
            url: '../bmuserinfo/batchCoupons',
            type: 'post',
            data: data,
            dataType: 'json',
            async: true,
            success: function (data) {
                if (data.code == 200) {
                    layer.closeAll();
                    layer.msg(data.msg);
                    getData();
                } else {
                    layer.msg(data.msg);
                }
            }
        });
    }


    function organizationChangeQuery(obj) {
        var orgId = $(obj).data("orgid");
        // console.log("organizationChangeQuery = "+orgId );
        getData(orgId);
    }


    //获取组织架构
    function getOrganization() {

        var formDate =
            {type: 3};

        $.ajax({
            url: "../bmuserinfo/getOrganization",
            type: "get",
            dataType: "json",
            data: formDate,
            async: false,
            success: function (res) {
                // console.log(res);
                if (res.code == "200") {
                    var organizationList = res.data.children;
                    var str = "";

                    var whichFloor = 1;
                    var uLHasNum = switchCss(whichFloor);


                    str += "<ul class=" + uLHasNum + ">";
                    $.each(organizationList, function (key, rog1) {

                        str += '<li>';
                        str += '<div class="tree-children" >';
                        str += '<div>';

                        str += "<p class='tree-arrow cursor'><img src='../static/userinfoPrivate/userinfo/img/icon_select_up.png'></p>"
                        str += '<p data-orgid="' + rog1.orgId + '" onclick="organizationChangeQuery(this)">' + rog1.orgName + '</p>';
                        str += '</div>';
                        str += '</div>';

                        if (rog1.isChildExist == '1' && !isNull(rog1.children) && rog1.children.length > 0) {
                            str += splicingMainStr(rog1, whichFloor);
                        }
                        str += '</li>';
                    });
                    str += '</ul>';

                    $("#organizationDiv").html(str);
                    //初始化
                    init();
                } else {
                    layer.msg(res.msg, {icon: 2, time: 1500});
                }
            }
        });

    }


    //拼接
    function splicingMainStr(rog1, whichFloor) {
        var str = "";
        if (rog1.isChildExist == '1' && !isNull(rog1.children) && rog1.children.length > 0) {
            whichFloor = whichFloor + 1;
            var uLHasNum = switchCss(whichFloor);

            str += '<ul class=" ' + uLHasNum + '">';

            $.each(rog1.children, function (key, rog2) {
                if (rog2.isChildExist == '1' && !isNull(rog2.children) && rog2.children.length > 0) {
                    str += '<li>';
                    str += '<div class="tree-children">';
                    str += '<div>';
                    str += "<p class='tree-arrow cursor'><img src='../static/userinfoPrivate/userinfo/img/icon_select_up.png'></p>"
                    str += '<p data-orgid="' + rog2.orgId + '" onclick="organizationChangeQuery(this)">' + rog2.orgName + '</p>';
                    str += '</div>';
                    str += '</div>';
                    str += splicingMainStr(rog2, whichFloor);
                    str += '</li>';
                } else {
                    if (!isNull(rog2)) {
                        str += splicingStr(rog2);
                    }
                }
            })
            str += '</ul>';

        } else {
            if (!isNull(rog1)) {
                str += splicingStr(rog1);
            }
        }
        return str;
    }


    //拼接
    function splicingStr(org) {
        var str = "";
        //是否是行政机构 0-否，1-是    type 是否实际勾选 1-是 0-否
        str += '<li>';
        str += '<div class="tree-children">';
        str += '<div>';
        str += '<p data-orgid="' + org.orgId + '" onclick="organizationChangeQuery(this)">' + org.orgName + '</p>';
        str += '</div>';
        str += '</div>';
        str += '</li>';
        return str;
    }


    //层级转换标签
    function switchCss(whichFloor) {

        var uLHasNum = "";

        switch (whichFloor) {
            case 1:
                uLHasNum = "tree-one";
                break;
            case 2:
                uLHasNum = "tree-two";
                break;
            case 3:
                uLHasNum = "tree-three";
                break;
            case 4:
                uLHasNum = "tree-four";
                break;
            case 5:
                uLHasNum = "tree-five";
        }
        return uLHasNum;
    }

    //查看老人详情
    function getBmUserinfoDetails(userNo) {
        window.location.href = "../bmuserinfo/toBmUserinfoPage?id=" + userNo + "&type=2"
    }

    function isNull(value) {
        return value == null || value === "" || value === undefined;
    }
</script>
</body>

</html>
